<template>
    <div>
        <van-nav-bar title="首页商城" fixed />
        <div style="height: 45px;"></div>
        <search></search>
        <swipe></swipe>

        <van-grid :column-num="4">
            <van-grid-item v-for="item in catitems" :icon="item.image_src" :text="item.name" />
            <van-grid-item v-for="item in catitems" :icon="item.image_src" :text="item.name" />
        </van-grid>
        <van-count-down millisecond :time="time" format="HH:mm:ss:SS" />
        <div class="pbl">
            <div style="width: 100%;height: 200px;background: skyblue;"><img style="width: 100%;height: 200px;"
                    src="../img/22f0b13b3d5050532c885299aeb14a89.webp" alt=""><span>11.00</span></div>
            <div style="width: 100%;height: 250px;background: skyblue;"><img style="width: 100%;height: 250px"
                    src="../img/22f0b13b3d5050532c885299aeb14a89.webp" alt=""><span>22.00</span></div>
            <div style="width: 100%;height: 280px;background: skyblue;"><img style="width: 100%;height: 280px;"
                    src="../img/22f0b13b3d5050532c885299aeb14a89.webp" alt=""><span>33.00</span></div>
            <div style="width: 100%;height: 180px;background: skyblue;"><img style="width: 100%;height: 180px;"
                    src="../img/22f0b13b3d5050532c885299aeb14a89.webp" alt=""><span>44.00</span></div>
            <div style="width: 100%;height: 110px;background: skyblue;"><img style="width: 100%;height: 110px;"
                    src="../img/22f0b13b3d5050532c885299aeb14a89.webp" alt=""><span>55.00</span></div>
            <div style="width: 100%;height: 260px;background: skyblue;"><img style="width: 100%;height: 260px;"
                    src="../img/22f0b13b3d5050532c885299aeb14a89.webp" alt=""><span>66.00</span></div>
            <div style="width: 100%;height: 200px;background: skyblue;"><img style="width: 100%;height: 200px;"
                    src="../img/22f0b13b3d5050532c885299aeb14a89.webp" alt=""><span>77.00</span></div>
            <div style="width: 100%;height: 250px;background: skyblue;"><img style="width: 100%;height: 250px;"
                    src="../img/22f0b13b3d5050532c885299aeb14a89.webp" alt=""><span>88.00</span></div>
            <div style="width: 100%;height: 170px;background: skyblue;"><img style="width: 100%;height: 170px;"
                    src="../img/22f0b13b3d5050532c885299aeb14a89.webp" alt=""><span>99.00</span></div>
            <div style="width: 100%;height: 164px;background: skyblue;"><img style="width: 100%;height: 164px;"
                    src="../img/22f0b13b3d5050532c885299aeb14a89.webp" alt=""><span>1010.00</span></div>
        </div>
    </div>
</template>

<script setup>
import { catitemsApi } from '@/api/api';
import swipe from '@/components/swipe.vue';
import search from '@/components/search.vue';
import { ref } from 'vue';
let catitems = ref([])
catitemsApi().then(res => {
    console.log('导航', res);
    catitems.value = res.data.message
})
</script>

<style>
.pbl {
    column-count: 2;
    column-gap: 20px;

    div {
        display: inline-block;
        margin-bottom: 30px;
        width: 100%;
    }
}
</style>